<template>
  <v-container>
    <v-card>
      <v-card-title>Medium Editor</v-card-title>
      <v-list-item>
        <v-list-item-content>
          <medium-editor
            :options="options"
            :text="myText"
            v-on:edit="applyTextEdit"
          />
          <!-- custom-tag='h2'    -->
        </v-list-item-content>
      </v-list-item>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title class="font-weight-bold mb-2"
            >网页内容</v-list-item-title
          >
          <p class="ma-2" v-html="myText"></p>
        </v-list-item-content>
      </v-list-item>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title class="font-weight-bold mb-2"
            >HTML 内容</v-list-item-title
          >
          <code class="ma-2">{{ myText }}</code>
        </v-list-item-content>
      </v-list-item>
    </v-card>
  </v-container>
</template>

<script>
// @ is an alias to /src
import editor from "vue2-medium-editor";
import "medium-editor/dist/css/medium-editor.css";
import "medium-editor/dist/css/themes/default.css";

export default {
  name: "Home",
  components: {
    "medium-editor": editor
  },
  data: () => ({
    myText: "",
    options: {
      toolbar: {
        position: "bottom"
      }
    }
  }),
  methods: {
    applyTextEdit(operation) {
      this.myText = operation.api.origElements.innerHTML;
    }
  }
};
</script>
